<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年08月23日 11:15
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <el-card class="login-hint-container" shadow="always">
      <div>
        <span class="login-hint-title">登录网站，开启你的创作之旅</span>
      </div>
      <div class="login-hint-mark">
        <div class="login-hint-item">
          <div>
            <span><svg-icon icon-class="time"/>更懂你的优质内容</span>
          </div>
          <div>
            <span><svg-icon icon-class="time"/>更专业的大咖答主</span>
          </div>
        </div>
        <div class="login-hint-item">
          <div>
            <span><svg-icon icon-class="time"/>更深度的互动交流</span>
          </div>
          <div>
            <span><svg-icon icon-class="time"/>更高效的创作环境</span>
          </div>
        </div>
      </div>
      <div class="login-hint-button">
        <el-button style="width:100%;" type="primary" @click="handleLogin">
          立即登录
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({})
export default class index extends Vue {

  /** 点击登录 */
  private handleLogin() {
    this.$router.push({name: 'Login'});
  }

}
</script>
<style scoped lang="scss">
.login-hint-container {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 25px;
  .login-hint-title {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 45px;
    padding-bottom: 15px;
    color: #3B3E41;
  }
  .login-hint-mark {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .login-hint-item {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 20px;
      width: 50%;
    }
  }
  .login-hint-button {
    padding-top: 25px;
  }
}
</style>
